<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/searchMove.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <title>变动费-查询</title>
</head>
<style>
    .layui-form-select{
        margin-right: 10px;
    }
</style>
<body class="all">
    <form class="top layui-form">
    <div class="top_left">
        <div class="sels layui-form-item">
            <span>日期：</span>
            <div class="layui-inline" style="margin-right: 10px;">
                <input type="text" name="stars" placeholder="选择日期" class="layui-input"  id="t1">
            </div>
            <span>~</span>
            <div class="layui-inline">
                <input type="text" name="ends" placeholder="选择日期" class="layui-input" id="t2">
            </div>
        </div>
        <div class="sels layui-form-item">
            <span>项目选择：</span>
            <div class="layui-input-inline">
                <select id="prts" xm-select="prts" xm-select-show-count="1" name="prts" class="valid">

                </select>
            </div>
        </div>
        <div class="sels layui-form-item">
            <span>分表：</span>
            <select name="status" lay-verify="" lay-search="">
                <option value="1">直接费</option>
                <option value="2">专项措施费</option>
                <option value="3">安全文明措施费</option>
            </select>
        </div>
        <!--<div class="sels layui-form">
            <span>项目序号：</span>
            <input type="text" class="layui-input" placeholder="输入序号" style="margin-right: 10px;width: 100px;">
            <span>~</span>
            <input type="text" class="layui-input" placeholder="输入序号" style="width: 100px;">
        </div>-->
        <div class="sels layui-form-item">
            工料机编号：
            <div class="layui-inline">
                <input name="b_num" type="text" autocomplete="off" class="layui-input" placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            工料机名称：
            <div class="layui-inline">
                <input name="b_name" type="text" autocomplete="off" class="layui-input" placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            型号：
            <div class="layui-inline">
                <input name="b_model" type="text" autocomplete="off" class="layui-input" placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            使用部位：
            <div class="layui-inline">
                <input name="b_prt" type="text" autocomplete="off" class="layui-input"  placeholder="请输入">
            </div>
        </div>
        <div class="sels layui-form-item">
            关键字搜索：
            <div class="layui-inline">
                <input name="s_note" type="text" autocomplete="off" class="layui-input" placeholder="备注">
            </div>
        </div>
    </div>
    <div>
        <button type="button" lay-submit="" lay-filter="seach" class="layui-btn">搜索</button>
        <button type="button" onclick="exports()" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出</button>
    </div>
</form>
    <div id="search" class="tabs">
        <table cellpadding="0" cellspacing="0" id="searchM" style="font-weight: bold">
            <tr>
                <td>序号</td>
                <td>项目序号</td>
                <td>操作</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>工料机编号</td>
                <td>工料机名称</td>
                <td>规格型号（姓名）</td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arrList">
                <td>{{item.id}}</td>
                <td>{{item.project_id}}</td>
                <td>
                    <span @click="editor(item.id,item.associate_id,item.type)" class="operation">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate_num}}</td>
                <td>{{item.associate_name}}</td>
                <td>{{item.associate_model}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
        </table>
    </div>
    <div id="demo8"></div>
    <div class="x-body" id="opens" style="display: none;padding-top: 10px">
        <form class="layui-form">
            <div class="ipst">
                <div class="layui-form-item ipts">
                    <span>单位(基数)：</span>
                    <div class="layui-inline">
                        <input type="text" id="unit" value="" name="unit" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ipts">
                    <span>名称 ：</span>
                    <div class="layui-inline">
                        <select name="bian" lay-verify="" id="bian" lay-search="">
                        </select>
                    </div>
                </div>
            </div>
            <div class="ipst">
                <div class="layui-form-item ipts">
                    <span>数量(系数)：</span>
                    <div class="layui-inline">
                        <input oninput="jine()" type="text" id="num" onkeyup="value=value.replace(/[^\d.]/g,'')" value="" name="num" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ipts">
                    <span>金额 ：</span>
                    <div class="layui-inline">
                        <input type="text" id="total_money" value="" name="total_money" placeholder="请输入" disabled class="layui-input">
                    </div>
                </div>
            </div>
            <div class="ipst">
                <div class="layui-form-item ipts">
                    <span>含税价 ：</span>
                    <div class="layui-inline">
                        <input oninput="jine()" type="text" id="tax_money" onkeyup="value=value.replace(/[^\d.]/g,'')" value="" name="tax_money" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ipts">
                    <span>不含税价：</span>
                    <div class="layui-inline">
                        <input type="text" id="notax_money" value="" name="notax_money"  disabled class="layui-input">
                    </div>
                </div>
            </div>
            <div class="ipst">
                <div class="layui-form-item ipts">
                    <span>税率(%) ：</span>
                    <div class="layui-inline">
                        <input oninput="jine()" onkeyup="value=value.replace(/[^\d.]/g,'')" type="text" id="tax_fee" value="" name="tax_fee" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ipts">
                    <span>税额 ：</span>
                    <div class="layui-inline">
                        <input type="text" id="total_taxmoney" onkeyup="value=value.replace(/[^\d.]/g,'')" value="" name="total_taxmoney" placeholder="请输入" disabled class="layui-input">
                    </div>
                </div>
            </div>
            <div class="ipst">
                <div class="layui-form-item ipts">
                    <span>使用部位：</span>
                    <div class="layui-inline">
                        <input type="text" id="use_part" value="" name="use_part" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item ipts">
                    <span>备注 ：</span>
                    <div class="layui-inline">
                        <input type="text" id="note" value="" name="note" placeholder="请输入" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn ipts_btn" type="button" lay-filter="modify" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</body>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script src="../../layui/formSelects-v4.js"></script>
<script>
    var vm = new Vue({
        el: '#search',
        data: {
            token: '',
            page: 1,
            limit: 12,
            arr: [],//项目列表
            ids: '',
            associate_id: '',
            types: '',//下拉列表标识
            arrList: [],//数据
            status: 1,//分表标识
            project_id: '',
            star: null,  //开始日期
            end: null, //结束日期
            bian_num: null,
            bian_name: null,
            bian_model: null,
            bian_part: null,
            ars:[],//下拉列表
            permissions:''//权限标识
        },
        created: function () {
            this.arr = JSON.parse(sessionStorage.getItem('project'));
            this.project_id = sessionStorage.getItem('projectopt');
            this.initData();
        },
        methods: {
            initData:function () {
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                var obj = {
                    project_id: this.project_id,
                    status: this.status,
                    page: this.page,
                    limit: this.limit,
                    star: this.star,  //开始日期
                    end: this.end, //结束日期
                    bian_num: this.bian_num,
                    bian_name: this.bian_name,
                    bian_model: this.bian_model,
                    bian_part: this.bian_part,
                }
                $.when(PUATTRBUTE.REQUESTFUN('api/Change/changeindex', obj).done(function(res){
                    layer.close(load);
                    if(res.code == 1){
                        for(item in res.data.list){
                            res.data.list[item].tax_fee = res.data.list[item].tax_fee * 100
                        }
                        vm.arrList = res.data.list;
                        if (vm.page == 1) {
                            vm.initpage(res.data.count);
                        }
                    }else{
                        vm.initpage(0);
                        if(res.msg == "暂无权限"){
                            vm.permissions= 1 ;
                        }
                        layer.msg(res.msg, {time: 1000, icon:2});
                    }
                }))
            },
            editor:function (id,associate_id,type) {
                this.ids = id;
                this.associate_id  = associate_id;
                this.types = type;
                var url = '';
                if (type == 1 || type == 4 || type == 5) {
                    url = 'api/Classify/materialindex';  //材料
                } else if (type == 2) {
                    url = 'api/Classify/workerindex';  //人工
                } else if (type == 3) {
                    url = 'api/Classify/mechanicalindex';  //机械
                }
                $.when(PUATTRBUTE.REQUESTFUN(url, {project_id:vm.project_id}).done(function(res){
                    if(res.code == 1){
                            vm.ars = res.data.list;
                            for (var i in vm.ars) {// 遍历数据赋值给二级列表的内容
                                if (type == 1 || type == 4 || type == 5) {
                                    var $content = $('<option value="' + vm.ars[i].id + '">' + vm.ars[i].cl_name + '</option>');
                                } else if (type == 2) {
                                    var $content = $('<option value="' + vm.ars[i].id + '">' + vm.ars[i].ry_type + '</option>');
                                } else if (type == 3) {
                                    var $content = $('<option value="' + vm.ars[i].id + '">' + vm.ars[i].jx_name + '</option>');
                                }
                                $('#bian').append($content);
                            }
                            layui.form.render();
                        }else{
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                );

                var obj = {
                    id: id,
                    project_id:this.project_id
                };
                var editUrl = '';
                if(this.status == 1){
                    editUrl = 'api/Zhimoney/zhimoneyedit';
                }else if(this.status == 2){
                    editUrl = 'api/Zhuanmoney/zhuanmoneyedit';
                }else if(this.status == 3){
                    editUrl = 'api/Anqumoney/anqumoneyedit';
                }
                $.when(PUATTRBUTE.REQUESTFUN(editUrl, obj).done(function(res){
                        if(res.code == 1){
                            var select = '',
                                s_arr = res.data.associate_id;
                                select = 'dd[lay-value="' + s_arr.id + '"]';// 设置value
                            $('#bian').siblings("div.layui-form-select").find('dl').find(select).click();
                            $("#unit").val(res.data.unit);
                            $("#num").val(res.data.num);
                            $("#tax_money").val(res.data.tax_money);
                            $("#tax_fee").val(res.data.tax_fee);
                            $("#use_part").val(res.data.use_part);
                            $("#note").val(res.data.note);
                            $("#total_money").val(res.data.total_money);
                            $("#notax_money").val(res.data.notax_money);
                            $("#total_taxmoney").val(res.data.total_taxmoney);
                            layui.form.render('select');
                        }else{
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                );
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['650px', '500px'], //宽高
                    title: '修改',
                    content: $("#opens"),
                    cancel: function(){
                        $('#bian').html("");
                    }
                });
            },
            //删除
            del: function (id) {
                var obj = {
                    id: id,
                    project_id:this.project_id
                };
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                });
                var delUrl = '';
                if(this.status == 1){
                    delUrl = 'api/Zhimoney/zhimoneydel';
                }else if(this.status == 2){
                    delUrl = 'api/Zhuanmoney/zhuanmoneydel';
                }else if(this.status == 3){
                    delUrl = 'api/Anqumoney/anqumoneydel';
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.when(PUATTRBUTE.REQUESTFUN(delUrl, obj).done(function(res){
                            layer.close(load);
                            layer.closeAll();
                            if(res.code == 1){
                                vm.initData();
                                layer.msg(res.msg, {time: 1000, icon: 1})
                            }else{
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                }, function(){
                    layer.closeAll();
                });
            },
            initpage: function (count) {
                console.log(count)
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: vm.limit
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            }
        }
    })
    //计算 total_money金额含税价tax_money不含税价notax_money税率tax_fee税额total_taxmoney
    layui.use(['form', 'laydate', 'jquery'], function () {
        var form = layui.form,
            laydate = layui.laydate;
        laydate.render({
            elem: '#t1', //指定元素
        })
        laydate.render({
            elem: '#t2', //指定元素
        })
        var arrs = vm.arr;
        for (var i in arrs) {// 遍历数据赋值给二级列表的内容
            var $content = $('<option value="' + arrs[i].id + '">' + arrs[i].name + '</option>');
            $('#prts').append($content);
        }
        form.render('select');
        layui.formSelects.render();
        layui.formSelects.value('prts', [vm.arr[0].id]);
        //查询
        form.on("submit(seach)",function(data){
            vm.page = 1;
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            var obj = {
                star: data.field.stars,
                end: data.field.ends,
                project_id: data.field.prts,
                status: data.field.status,
                bian_num: data.field.b_num,
                bian_name: data.field.b_name,
                bian_model: data.field.b_model,
                bian_part: data.field.b_prt,
                note: data.field.s_note,
                page: vm.page,
                limit : vm.limit
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/Change/changeindex', obj).done(function(res){
                layer.close(load);
                if(res.code == 1){
                    layer.msg(res.msg, {time: 1000, icon:1});
                    vm.arrList = res.data.list;
                    vm.status = data.field.status;

                    vm.star = data.field.stars;
                    vm.end = data.field.ends;
                    vm.project_id = data.field.prts;
                    vm.bian_num = data.field.b_num;
                    vm.bian_name = data.field.b_name;
                    vm.bian_model = data.field.b_model;
                    vm.bian_part = data.field.b_prt;
                    if (vm.page == 1) {
                        vm.initpage(res.data.count);
                    }
                }else{
                    vm.arrList = [];
                    vm.initpage(0);
                    layer.msg(res.msg, {time: 1000, icon:2});
                }
            }))
        })
        //修改
        form.on("submit(modify)",function(data){
            var obj = {
                type: vm.types,
                unit: data.field.unit,
                num: data.field.num,
                tax_fee: data.field.tax_fee,
                tax_money: data.field.tax_money,
                use_part: data.field.use_part,
                project_id: vm.project_id,
                id : vm.ids,
                associate_id: data.field.bian,
                note: data.field.note
            };
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            var editdoUrl = '';
            if(vm.status == 1){
                editdoUrl = 'api/Zhimoney/zhimoneyeditdo';
            }else if(vm.status == 2){
                editdoUrl = 'api/Zhuanmoney/zhuanmoneyeditdo';
            }else if(vm.status == 3){
                editdoUrl = 'api/Anqumoney/anqumoneyeditdo';
            }
            $.when(PUATTRBUTE.REQUESTFUN(editdoUrl, obj).done(function(res){
                layer.close(load);
                layer.closeAll();
                $('#bian').html("");
                if(res.code == 1){
                    vm.initData();
                    layer.msg(res.msg, {time: 1000, icon:1});

                }else{
                    layer.msg(res.msg, {time: 1000, icon:2});
                }
            }))
        })
        window.jine = function () {
            var n = $("#num").val(); //数量
            var h = $("#tax_money").val(); //含税额
            var sl = $("#tax_fee").val(); //税率
            var bhse = h / (1 + sl)+'';
            var ind = bhse.indexOf('.');
            bhse = bhse.substring(0, ind + 3);
            var je = bhse * n+'';
            var ind = je.indexOf('.');
            je = je.substring(0, ind + 3);
            var se = h / (1 + sl) * sl * n+'';
            var ind = se.indexOf('.');
            se = se.substring(0, ind + 3);
            $("#notax_money").val(bhse); // 不含税额
            $("#total_money").val(je); //金额
            $("#total_taxmoney").val(se); //税额
        }
    })
    //导出
    function exports() {
        if(vm.permissions == 1){
            layer.alert("抱歉，您没有此权限！")
        }else {
            var tableHtml = $('#searchM');
            $(tableHtml).css({
                'border':'1px solid #d5d5d2',
                'text-align':'center',
                'border-collapse':'collapse',
            });
            $(tableHtml).find('tr td').css({
                'text-align':'center',
                'border':'1px solid #d5d5d2',
                'line-height':'30px',
                'padding':'0px 10px',
                'min-width':'100px'
            });
            var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
            $('.table-btn-group').append(urlA);
            urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
            urlA.download = "变动费.xls";
            urlA.click();
        }
    }
</script>
</html>
